import React, { Component } from "react";
import { Form, Input, Button, Row, Col } from "antd";
import Content from "../../components/Content";
import './ScreeningLibrary.css'

import '../../utils/API'
import '../../utils/Network'

const { Item } = Form;
const { Search } = Input;
class AcquisitionCreateForm extends Component {
  constructor(props) {
    super(props);
  }

  onSubmit = evt => {
    let errorMsgArea = document.getElementById('errorMsg');

    let Ren_id = document.getElementById('Ren_id').value;
    let task_source = document.getElementById('task_source').value;
    let task_content = document.getElementById('task_content').value;
    let task_process = document.getElementById('task_process').value;
    let join_link = document.getElementById('join_link').value;
    let worker = document.getElementById('worker').value;

    let lastRenId = window.sessionStorage.getItem('Ren_id');
    if( lastRenId == Ren_id ) {
      errorMsgArea.innerHTML='Err：任务编号已存在！';
      return;
    }

    const url = global.api.renwu;
    return global.network.post(url, {
      'id': Ren_id, 
      'Ren_id': Ren_id, 
      'task_source': task_source, 
      'task_content': task_content, 
      'task_process': task_process, 
      'join_link': join_link, 
      'worker': worker,
      'start_link_time': null,
      'end_link_time': null,
      'start_mass_time': null,
      'end_mass_time': null,
      'Acq_id': null
    })
    .then(res => {
      if( res.id == Ren_id ) {
        errorMsgArea.innerHTML='保存成功！';
        window.sessionStorage.setItem('Ren_id', Ren_id);

        /**
        document.getElementById('Ren_id').value = '';
        document.getElementById('task_source').value = '';
        document.getElementById('task_content').value = '';
        document.getElementById('task_process').value = '';
        document.getElementById('join_link').value = '';
        document.getElementById('worker').value = '';
       */
      }
    })
    .catch(err => {
      errorMsgArea.innerHTML=err;
    }) 

  };

  createRandNo = (e) => {
    let rand = parseInt( Math.random() * 60000000 );
    document.getElementById("Ren_id").value=rand;
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      }
    };

    return (
      <Form {...formItemLayout} onSubmit={this.onSubmit} colon={false}>
        <Item label="任务编号">
          <Input id="Ren_id" style={{width: '78%' }} value={parseInt( Math.random() * 60000000 )}/>
          <Button onClick={this.createRandNo} type="primary">编号自动生成</Button>
        </Item>
        <Item label="任务来源"><Input id="task_source" /></Item>
        <Item label="任务内容"><Input id="task_content" /></Item>
        <Item label="任务进程"><Input id="task_process" /></Item>
        <Item label="参与环节"><Input id="join_link" /></Item>
        <Item label="工作人员"><Input id="worker" /></Item>
        <Item wrapperCol={{ span: 12, offset: 4 }}>
          <Row guuter={16}>
            <Col span={16}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <span id="errorMsg" style={{marginLeft: 20, color: 'red'}}></span>
            </Col>
          </Row>
        </Item>
      </Form>
    );
  }
}
const WrapperedAcquisitionCreateForm = Form.create({
  name: "create_acquisition"
})(AcquisitionCreateForm);

class AcquisitionCreate extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedAcquisitionCreateForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default AcquisitionCreate;
